<template>
  <div>
    <div style="padding: 15px; background: #fff" class="custom-el-table">
      <el-table :data="tableData" style="width: 100%" size="mini">
        <el-table-column prop="type" label="污染类别" align="center" />
        <el-table-column prop="count" label="总数" align="center" />
        <el-table-column prop="success" label="已办结" align="center" />
        <el-table-column prop="error" label="未办结" align="center" />
        <el-table-column prop="percentage" label="办结率(%)" align="center" />
      </el-table>
      <div class="tableMore" @click="loadMore">
        {{ pageNum === totalPage ? '暂无更多数据' : loading ? '加载中' : '查看更多' }}
        <i v-if="pageNum < totalPage" :class="loading ? 'el-icon-loading' : 'el-icon-arrow-down'" />
      </div>
    </div>
    <div class="gap" />
    <div style="background: #fff; padding: 20px">
      <TimeNearChoice :start.sync="startTime" :end.sync="endTime" :name="timeType" class="mt-20" />
      <div class="gap" />
      <RadioTags :list="list1" :sub-list="list3" :is-scroll="false" @change="getPickTag" />
      <div class="gap" />
      <CommonTitle title="信访举报" :is-icon="true">
        <template #right>
          <div style="margin-left: auto">
            <RadioTags :list="list2" />
          </div>
        </template>
      </CommonTitle>
      <div class="gap" />
      <CommonTitle title="项目审批分析" :is-line="true">
        <template #right>
          <div class="time" @click="show = true">{{ time }}<i class="el-icon-arrow-down" /></div>
        </template>
      </CommonTitle>
    </div>
    <div />
    <div v-for="(item, index) in dropList" :key="index">
      <div class="gap" />
      <DropDownBox :icon="item.icon" :grad-color="item.gradColor" :is-open="item.isOpen" :title="item.title" :desc="item.desc" />
    </div>
    <div class="gap" />
    <van-button type="primary" size="small" block @click="logOut">退出登录</van-button>
    <van-popup v-model="show" position="bottom">
      <van-picker title="标题" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="show = false" />
    </van-popup>
    <div class="map-container-warp position-relative">
      <div v-if="fullscreen" class="search">
        <van-search v-model="searchText" shape="round" placeholder="请输入搜索关键词" @click.stop="fullscreen = true" @focus.stop="fullscreen = true" @search.stop="onSearch">
          <template #left> <span class="iconfont" @click="closeFullScreen">&#xe612;</span></template>
        </van-search>
      </div>
      <map-tools v-if="fullscreen" class="pos" @zoom="changerZoom" @center="changeCenter" @currentType="changeCurrentType" @location="currentPosition" />
      <mapLegend v-if="fullscreen" name="water" shape="circle" />
      <div id="map" ref="map" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
import { initTDTLayer, addPoint } from '@/utils/map/mapTools3x'
import mapMixin from '@/assets/mixin/mapHandler'
import DropDownBox from '@/components/common/DropDownBox'
import mapTools from '@/components/common/mapTools'
import mapLegend from '@/components/common/mapLegend'
import { Dialog } from 'vant'
export default {
  components: {
    DropDownBox,
    mapTools,
    mapLegend
  },
  mixins: [mapMixin],
  data() {
    return {
      timeType: '近一周',
      startTime: '',
      endTime: '',
      list1: [
        {
          title: '重点排污'
        },
        {
          title: '固废产废'
        },
        {
          title: '危废处置'
        },
        {
          title: '放射源'
        },
        {
          title: '地表水'
        },
        {
          title: '水源地'
        }
      ],
      list2: [
        {
          title: '类别统计'
        },
        {
          title: '街道统计'
        }
      ],
      list3: [
        {
          subTitle: '全部'
        },
        {
          subTitle: '固废'
        },
        {
          subTitle: '危废'
        },
        {
          subTitle: '固废'
        },
        {
          subTitle: '危废'
        },
        {
          subTitle: '固废'
        },
        {
          subTitle: '危废'
        },
        {
          subTitle: '固废'
        },
        {
          subTitle: '哈哈'
        }
      ],
      dropList: [
        {
          icon: '&#xe729;',
          title: '水环境',
          desc: '当前水环境不存在问题',
          isOpen: false,
          gradColor: ['#1ec1d0', '#0ddfc2']
        },
        {
          icon: '&#xe6a8;',
          title: '大气环境',
          desc: '检测到1个可优化问题',
          isOpen: false,
          gradColor: ['#ffb64a', '#ffe67f']
        }
      ],
      tableData: [
        {
          type: '噪声污染',
          count: 96,
          success: 82,
          error: 14,
          percentage: 85
        }
      ],
      loading: false,
      totalPage: 4, // 测试用
      pageNum: 1,
      show: false,
      columns: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年', '2025年', '2026年', '2027年', '2028年'],
      time: '2021'
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.startTime)
      console.log(this.endTime)
    })
  },
  methods: {
    gisInit() {
      const self = this
      self.$refs.map.innerHTML = ''
      const map = new self.mapModular.Map('map', self.mapBaseInfo)
      self.map = map
      initTDTLayer(map, this.currentType)
      // eslint-disable-next-line no-undef
      if (dijit.byId('measureTools')) {
        // eslint-disable-next-line no-undef
        dijit.byId('measureTools').destroy()
      }
      new self.mapModular.MeasureTools({ map: map }, 'measureTools')
      // 生成点位
      addPoint(map, this.mapWater, 'WATER', true)
    },
    getTime() {
      console.log(this.startTime)
      console.log(this.endTime)
    },
    getPickTag(obj) {
      console.log(obj)
    },
    logOut() {
      Dialog.confirm({
        title: '提示',
        message: '确认要退出登录吗？'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    loadMore() {
      const addData = [
        {
          type: '废气污染',
          count: 96,
          success: 82,
          error: 14,
          percentage: 85
        },
        {
          type: '固废污染',
          count: 96,
          success: 82,
          error: 14,
          percentage: 85
        }
      ]
      this.loading = true
      setTimeout(() => {
        if (this.pageNum < this.totalPage) {
          this.pageNum += 1
          this.tableData = this.tableData.concat(addData)
        }
        this.loading = false
      }, 3000)
    },
    onConfirm(time) {
      this.show = false
      this.time = time.slice(0, 4)
      console.log(time)
    }
  }
}
</script>

<style lang="scss" scoped>
.time {
  margin-left: auto;
  font-size: 24px;
  color: #999;
  display: flex;
  align-items: center;
  i {
    margin-left: 5px;
  }
}
.map-container-warp {
  width: 100%;
  height: 400px;
}

.search {
  height: 110px;
  width: 100%;
  z-index: 20000;
  position: absolute;
  padding-right: 20px;
  top: 15px;
  left: 0;
  .van-search {
    background-color: rgba($color: #000000, $alpha: 0);
    padding: 10px 0;
  }
  .iconfont {
    margin: 0 20px;
    width: 60px;
    height: 60px;
    background-color: rgba(242, 242, 242, 1);
    font-size: 35px;
    text-align: center;
    line-height: 60px;
    color: #666666;
    border-radius: 50%;
  }
}
</style>
